<template>
    <div class="main user-layout-register" :style="{height:docHeight+'px'}">
        <div class="container">
            <a-row>
                <a-col :span="7" />
                <a-col :span="10">
                    <div style="background-color: #FFFFFF;">
                        <h3><span>注册</span></h3>
                        <a-form ref="formRegister" :form="form" id="formRegister">
                            <a-form-item>
                                <a-input size="large" type="text" placeholder="用户名"
                                    v-decorator="['username', {rules: [{ required: true, message: '请输入用户名 ' }], validateTrigger: ['change', 'blur']}]" />
                            </a-form-item>

                            <a-popover placement="rightTop" :trigger="['focus']"
                                :getPopupContainer="(trigger) => trigger.parentElement"
                                v-model="state.passwordLevelChecked">
                                <template slot="content">
                                    <div :style="{ width: '240px' }">
                                        <div :class="['user-register', passwordLevelClass]">
                                            强度：<span>{{ passwordLevelName }}</span></div>
                                        <a-progress :percent="state.percent" :showInfo="false"
                                            :strokeColor=" passwordLevelColor " />
                                        <div style="margin-top: 10px;">
                                            <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
                                        </div>
                                    </div>
                                </template>
                                <a-form-item>
                                    <a-input size="large" type="password" @click="handlePasswordInputClick"
                                        autocomplete="false" placeholder="至少8位密码，区分大小写"
                                        v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]" />
                                </a-form-item>
                            </a-popover>

                            <a-form-item>
                                <a-input size="large" type="password" autocomplete="false" placeholder="确认密码"
                                    v-decorator="['password2', {rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]" />
                            </a-form-item>

                            <a-form-item>
                                <a-input size="large" type="text" placeholder="邮箱" v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }],
                                     validateTrigger: ['change', 'blur']}]" />
                            </a-form-item>


                            <a-row :gutter="16">
                                <a-col class="gutter-row" :span="16">
                                    <a-form-item>
                                        <a-input size="large" type="text" placeholder="验证码"
                                            v-decorator="['code', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
                                            <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col class="gutter-row" :span="8">
                                    <a-button class="getCaptcha" size="large" :disabled="state.smsSendBtn"
                                        @click="getEmailcode"
                                        v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')" />
                                </a-col>
                            </a-row>

                            <a-form-item>
                                <a-button size="large" type="primary" htmlType="submit" class="register-button"
                                    :loading="registerBtn" @click.stop.prevent="handleSubmit" :disabled="registerBtn">注册
                                </a-button>
                                <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
                            </a-form-item>

                        </a-form>

                    </div>
                </a-col>
                <a-col :span="7" />
            </a-row>
        </div>
        <!-- <myfooter/> -->
    </div>

</template>

<script>
    // import myfooter from "@/components/unit/footer";
    // import {getCode,regUser} from "@/api/login"
    const levelNames = {
        0: '低',
        1: '低',
        2: '中',
        3: '强'
    };
    const levelClass = {
        0: 'error',
        1: 'error',
        2: 'warning',
        3: 'success'
    };
    const levelColor = {
        0: '#ff0000',
        1: '#ff0000',
        2: '#ff7e05',
        3: '#52c41a'
    };
    export default {
        name: "register",
        // components: {
        //     myfooter,
        // },
        data() {
            return {
                form: this.$form.createForm(this),
                state: {
                    time: 60,
                    smsSendBtn: false,
                    passwordLevel: 0,
                    passwordLevelChecked: false,
                    percent: 10,
                    progressColor: '#FF0000'
                },
                registerBtn: false
            }
        },
        created() {
            this.docHeight = window.innerHeight;
            console.log(this.docHeight)

        },
        computed: {
            passwordLevelClass() {
                return levelClass[this.state.passwordLevel]
            },
            passwordLevelName() {
                return levelNames[this.state.passwordLevel]
            },
            passwordLevelColor() {
                return levelColor[this.state.passwordLevel]
            }
        },
        methods: {
            handlePasswordLevel(rule, value, callback) {
                let level = 0;

                // 判断这个字符串中有没有数字
                if (/[0-9]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有字母
                if (/[a-zA-Z]/.test(value)) {
                    level++
                }
                // 判断字符串中有没有特殊符号
                if (/[^0-9a-zA-Z_]/.test(value)) {
                    level++
                }
                this.state.passwordLevel = level;
                this.state.percent = level * 30;
                if (level >= 2) {
                    if (level >= 3) {
                        this.state.percent = 100
                    }
                    callback()
                } else {
                    if (level === 0) {
                        this.state.percent = 10
                    }
                    callback(new Error('密码强度不够'))
                }
            },

            handlePasswordCheck(rule, value, callback) {
                const password = this.form.getFieldValue('password');
                // console.log('value', value);
                if (value === undefined) {
                    callback(new Error('请输入密码'))
                }
                if (value && password && value.trim() !== password.trim()) {
                    callback(new Error('两次密码不一致'))
                }
                callback()
            },



            handlePasswordInputClick() {
                if (!this.isMobile) {
                    this.state.passwordLevelChecked = true;
                    return
                }
                this.state.passwordLevelChecked = false
            },

            handleSubmit() {
                // const { form: { validateFields }, state, $router,$notification } = this;
                // validateFields({ force: true }, (err,values) => {
                //     if (!err) {
                //         state.passwordLevelChecked = false;
                //         //console.log(values)
                //         const regParams = { ...values }

                //         regParams.username= values.username
                //         regParams.password = values.password
                //         regParams.email=values.email
                //         regParams.code=values.code
                //         regUser(regParams).then(()=> {

                //             $notification['success']({
                //                 message: '提示',
                //                 description: '注册成功，返回登录界面',
                //                 duration: 8
                //             })
                //             $router.push({ name: 'login' })
                //         }).catch(err => {

                //             this.requestFailed(err)
                //         })


                //     }
                // })
            },
            getEmailcode(e) {
                e.preventDefault()
                // const { form: { validateFields }, state, $message, $notification } = this

                // validateFields(['email'], { force: true },
                //     (err, values) => {
                //         if (!err) {
                //             state.smsSendBtn = true

                //             const interval = window.setInterval(() => {
                //                 if (state.time-- <= 0) {
                //                     state.time = 60
                //                     state.smsSendBtn = false
                //                     window.clearInterval(interval)
                //                 }
                //             }, 1000)

                //             const hide = $message.loading('验证码发送中..', 0)

                //              getCode({email: values.email }).then(()=> {
                //                 setTimeout(hide, 2500)
                //                 $notification['success']({
                //                     message: '提示',
                //                     description: '验证码获取成功，',
                //                     duration: 8
                //                 })
                //             }).catch(err => {
                //                 setTimeout(hide, 1)
                //                 clearInterval(interval)
                //                 state.time = 60
                //                 state.smsSendBtn = false
                //                 this.requestFailed(err)
                //             })
                //         }
                //     }
                // )
            },


            requestFailed(err) {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                    duration: 4
                });
                this.registerBtn = false
            }
        },
        watch: {
            'state.passwordLevel'() {
                //console.log(val)
            }



        },
    }
    
</script>

<style scoped>
    .main {
        width: 100%;
        min-width: 1200px;
        min-height: 100%;
        height: 100%;
        background-size: 100%;
        padding: 110px 0 144px;
        position: relative;
        background: #0c3eff url(~@/assets/background.svg) no-repeat 50% 50%;

    }

    .container {
        width: 80%;
        min-height: 50%;
        min-width: 1200px;

    }

    .container {
        margin-left: 140px;
    }

    #formRegister {
        width: 80%;
        margin: 0 10%;
        padding-bottom: 20px;
    }

    .user-layout-register h3 {
        margin-bottom: 20px;
        width: 100%;
        padding-top: 20px;
        text-align: center;
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.5;
    }

    .user-layout-register .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
    }

    .user-layout-register .register-button {
        width: 50%;
    }

    .user-layout-register .login {
        float: right;
        line-height: 40px;
    }

    .user-register .error {
        color: #ff0000;
    }

    .user-register .warning {
        color: #ff7e05;
    }

    .user-register .success {
        color: #52c41a;
    }

    .logo_div {
        width: 100%;
        height: 400px;
        margin-left: 60px;

        /* background-image: url("../assets/iot.png"); */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .logo_div h3 {
        position: relative;
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.5;
        color: #2c3e50;
        width: 100%;
        text-align: center;
        padding-top: 100px;
    }

    .logo_div p {
        color: #adb5bd !important;
        font-size: 1.14rem;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 1rem;
        text-align: center;

    }
</style>